<%@page import="java.util.HashMap"%>
<%@page import="util.DataBaseUtils"%>
<%@page import="java.util.ArrayList"%>
<%@page import="service.CategoryService"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@page import="service.ArticleService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include  file="common/taglib.jsp"%>

<%
	ArticleService articleService = new ArticleService();
	request.setCharacterEncoding("UTF-8");
	List<Map<String,Object>> categoryList = new ArrayList();
	
	//查询所有的专题
	CategoryService categoryService = new CategoryService();
	categoryList = categoryService.list();
	//遍历所有专题，获取前6篇文章
	for(int i = 0; i < categoryList.size();i++){
		Map<String,Object> category = categoryList.get(i);
		List<Map<String,Object>> articles = articleService.getArticlesByCategoryId(category.get("category_id").toString(), 0, 6);
		category.put("articles", articles);
	}

	
	pageContext.setAttribute("categoryList", categoryList);
	

%>
<script>
	if(!"${sessionScope.username}"){
		location.href="login.jsp"
	}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="${basePath}/static/css/public.css"/>
<link rel="stylesheet" type="text/css" href="${basePath}/static/css/index.css"/>

<script src="${basePath}/static/js/jQuery.js"></script>

</head>
<body>
	<!-- 头部页面 -->
	<%@include file="common/header.jsp" %>
	
	<div class="banner" style="display:none;">
		<div class='content'>
			<ul>
				<li class="fl">
					<a href="javascript:void(0)">
						<img src="static/img/5.png"/>
					</a>
				</li>
				<li class="fl">
					<a href="javascript:void(0)">
						<img src="static/img/1.png"/>
					</a>
				</li>
				<li class="fl">
					<a href="javascript:void(0)">
						<img src="static/img/2.png"/>
					</a>
				</li class="fl">
				<li class="fl">
					<a href="javascript:void(0)">
						<img src="static/img/3.png"/>
					</a>
				</li>
				<li class="fl">
					<a href="javascript:void(0)">
						<img src="static/img/4.png"/>
					</a>
				</li>
				<li class="fl">
					<a href="javascript:void(0)">
						<img src="static/img/5.png"/>
					</a>
				</li>
				<li class="fl">
					<a href="javascript:void(0)">
						<img src="static/img/1.png"/>
					</a>
				</li>
			</ul>
			
			<!-- 按钮区 -->
			<span class='banner_left'><i class='btn_left'></i></span>
			<span class='banner_right'><i class='btn_right'></i></span>
			
		</div>
		
		
		
	</div>
	
	<!-- 内容区域 -->
	<div style='border:1px solid #ccc'>
		<br/><br/>
		<c:forEach items="${categoryList}" var="category">
			<div class='category'>
				<div class='title'>${category.category_name }</div>
				<ul class='items'>
					<c:forEach items="${category.articles}" var="item">
						<li class='item' onclick="detail('${item.id}');">
							<div class='item-banner'>
								<div class='item-header'>${item.header}</div>
								<div class='item-name' title = "${item.name}">${item.name}</div>
								<div class='item-author'>@${item.author} 著</div>
							</div>
							<div class='item-description'>${item.description}</div>
						</li>
					</c:forEach>
					<div style='clear:both'></div>
				</ul>
			</div>
		</c:forEach>		

	<br><br><br><br>
	<br><br><br><br>
	</div>

		
	
	
	<script>
		var leftBtn = $('.btn_left').eq(0); //左按钮
		var rightBtn = $('.btn_right').eq(0);//右按钮
		var ul = $('.banner .content ul').eq(0); 

		var index = 0;
		var imgwidth = $('.banner .content ul li').width(); //获取轮播图片的宽度
		var len =  $('.banner .content ul li').length - 2;//获取总共的图片数量

		//移动图片
		function movePicture(){
			$('.banner .content ul').animate({'margin-left':-imgwidth * (index+1)},1000,function(){
				if(index == len){
					$(this).css('margin-left',-imgwidth);
					index = 0;
				}
				if(index == -1){
					$(this).css('margin-left',-imgwidth * len);
					index = len - 1;
				}
			});
		}
				
		rightBtn.on('click',function(){
			index ++;
			movePicture();
		});

		leftBtn.on('click',function(){
			index --;
			movePicture();
		});

		//打开详情页
		function detail(id){
			var a = document.createElement("a");
			a.href = "detail.jsp?id=" + id; 
			console.log(a);
			a.target = '_new'; //指定在新窗口打开
			a.click();//触发打开事件
		}
				
		
	</script>
</body>
</html>
